<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    
    a {
        text-decoration: none;
    }
    
    .container {
        position: relative;
        width: 480px;
        height: 360px;
        margin: 100px auto 0 auto;
        overflow: hidden;
        box-shadow: 0 0 5px mediumpurple;
    }
    
    .wrap {
        position: relative;
        width: 2880px;
        height: 360px;
        z-index: 1;
        left: -480px;
    }
    
    img {
        width: 480px;
        height: 360px;
        border: 1px solid blue;
        float: left;
    }
    
    .buttons {
        position: absolute;
        left: 170px;
        bottom: 4px;
        width: 140px;
        height: 20px;
        z-index: 2;
    }
    
    .buttons span {
        display: inline-block;
        width: 20px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        border-radius: 5px;
        background-color: mediumslateblue;
    }
    
    .buttons span.on {
        background-color: red;
    }
    
    .arrow_left {
        position: absolute;
        left: 20px;
        bottom: 180px;
        width: 20px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        border-radius: 5px;
        background-color: mediumslateblue;
        z-index: 2;
    }
    
    .arrow_right {
        position: absolute;
        right: 20px;
        bottom: 180px;
        width: 20px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        border-radius: 5px;
        background-color: mediumslateblue;
        z-index: 2;
    }
    
    .buttons span:hover,
    .arrow:hover {
        cursor: pointer;
    }
</style>

<script>
    window.onload = function() {
        var buttons = document.getElementsByClassName('buttons');
        var wrap = document.getElementsByClassName('wrap');

        // 设置点击按钮是否选中
        function curImgButton() {
            for (var i = 0; i < buttons[0].children.length; i++) {
                buttons[0].children[i].className = "";
            }
            buttons[0].children[-wrap[0].offsetLeft / 480].className = "on"
        }

        var arrow_left = document.getElementsByClassName('arrow_left');
        var arrow_right = document.getElementsByClassName('arrow_right');
        // 上一张
        function lastImg() {
            wrap_left = wrap[0].offsetLeft;
            // console.log(wrap_left)
            if (wrap_left == 0) {
                wrap[0].style.left = '-' + (wrap[0].children.length - 1) * 480 + 'px'
            } else {
                wrap[0].style.left = wrap_left + 480 + 'px'
            }
            curImgButton();
        }

        // 下一张
        function nextImg() {
            wrap_left = wrap[0].offsetLeft;
            // console.log(wrap_left)
            if (wrap_left == '-' + (wrap[0].children.length - 1) * 480) {
                wrap[0].style.left = '-' + 0 + 'px'
            } else {
                wrap[0].style.left = wrap_left - 480 + 'px'
            }
            curImgButton();

        }

        // 自动播放
        var timer;

        function autoPlay() {
            timer = setInterval(function() {
                nextImg();
            }, 2000);
        }
        autoPlay();

        // 点击上一张按钮
        arrow_left[0].onclick = function() {
                clearInterval(timer);
                lastImg()
            }
            // 点击下一张按钮
        arrow_right[0].onclick = function() {
            clearInterval(timer);
            nextImg()
        }

        // 点击数字按钮
        for (var i = 0; i < buttons[0].children.length; i++) {
            buttons[0].onclick = function(ev) {
                clearInterval(timer);
                // console.log(ev)
                wrap[0].style.left = '-' + (ev.target.innerText - 1) * 480 + 'px';
                buttons
            }
            curImgButton()
        }
    }
</script>

<body>
    <div class="container">
        <div class="wrap">
            <img src="https://alifei05.cfp.cn/creative/vcg/800/version23/VCG41175510742.jpg" alt="1.png">
            <img src="https://t7.baidu.com/it/u=4198287529,2774471735&fm=193&f=GIF" alt="2.png">
            <img src="https://t7.baidu.com/it/u=1956604245,3662848045&fm=193&f=GIF" alt="3.png">
            <img src="https://t7.baidu.com/it/u=2529476510,3041785782&fm=193&f=GIF" alt="4.png">
            <img src="https://t7.baidu.com/it/u=727460147,2222092211&fm=193&f=GIF" alt="5.png">
            <img src="https://t7.baidu.com/it/u=2511982910,2454873241&fm=193&f=GIF" alt="6.png">
        </div>
        <div class="buttons">
            <span>1</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
            <span>5</span>
            <span>6</span>
        </div>
        <a href="javascript:void(0);" class="arrow arrow_left">&lt;</a>
        <a href="javascript:void(0);" class="arrow arrow_right">&gt;</a>
    </div>
</body>

</html>